<template>
  <div>
    <!--列表的外壳-->
    <div v-for="item in tabData" :key="item.id">
      <component
        :is="componentKind[item.componentKind]"
        :moduleId="item.id"
        v-show="item.id == tabState.activeId"
      >
      </component>
    </div>
  </div>
</template>

<script setup>
// 组件字典
import componentKind from '../controller/component.js'
// 状态
import VueDS from 'vue-data-state'

// 访问状态
const { get } = VueDS.useStore()
// 获取 tab 的状态
const tabState = get.tabState()
// 获取tab的数据
const tabData = tabState.tabData

if (tabData.length === 1) {
  tabState.activeId = tabData[0].id
}
</script>
